<template>
	<view class="">
		<view>
			<view class="topBanner">
				<image src="../../static/sxbm.png" mode="" class="image"></image>
				<div class="topbanner"></div>
			</view>
			<view class="" style=" overflow: hidden; background-color: #fff">
				<!-- <view class="sell_head _flex align-items_center" style="">
					<view class="" style="width: 75%;">
						<view>
							<text style="font-size: 50rpx;">省心帮卖</text>
						</view>
						<view class="_flex _justify_between _marginTop">
							<view class="" style="color: #888;">
								<u-icon name="play-circle-fill" style="margin-right: 5rpx;"></u-icon>
								<text style="white-space: nowrap;">价格高</text>

							</view>
							<view class="" style="color: #888;">
								<u-icon name="play-circle-fill" style="margin-right: 5rpx;"></u-icon>
								<text style="white-space: nowrap;">拿钱快</text>

							</view>
							<view class="" style="color: #888;">
								<u-icon name="play-circle-fill" style="margin-right: 5rpx;"></u-icon>
								<text style="white-space: nowrap;">不打扰</text>

							</view>
							<view class="" style="color: #888;">
								<u-icon name="play-circle-fill" style="margin-right: 5rpx;"></u-icon>
								<text style="white-space: nowrap;">超省心</text>

							</view>
						</view>
					</view>
					<view class="" style="width: 25%;">
						<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/static/safety.png" mode="widthFix" style="width: 100%;"></image>
					</view>
				</view> -->
				<!-- 选择城市 -->
				<view class="_flex align-items_center selected-Box">
					<view class="selectedR" @click="openLevel" >
						<text>{{assessInfo.addresss}}</text>
						<u-icon name="arrow-down-fill" size="19"></u-icon>
					</view>
					<view class="selectedL">
						<u-input v-model="assessInfo.phone" placeholder-style="color: #888;" type="number" maxlength="11" placeholder="请填写手机号码"
							:clearable="false" />
					</view>
				</view>
			
				<view class="" style="padding: 30rpx;">
					<view class="btnBlue" @click="onekey">
						<view class="btnBlue_title">
							一键卖车
						</view>
						<view class="btnBlue_desc" style="color: #ffffff;">
							轿车 · SUV · MPV
						</view>
					</view>
					<view class="btnBlueBorder _marginTop" @click="mySellCar" style="
		border-radius: 60rpx;">
						<view class="btnBlue_title" style="color: #002B56;">
							自己卖车
						</view>
						<view class="btnBlue_desc">
							全网展示、自由交易
						</view>
					</view>
				</view>
				
				<view class="read" style="margin-bottom: 40rpx; padding: 0 30rpx;">
					<u-checkbox-group>
						<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle">
							<text class="tip">使用本服务意味着您已经阅读并同意</text>
							<text class="tip" style="color: #002B56;" @click="goPrivacyPolicy">《隐私协议》</text>
							<!-- <text class="tip">相关条款</text> -->
						</u-checkbox>
						
					</u-checkbox-group>
					
				</view>
	
			</view>
			
	<!-- 		<view class="_marginTop"
				style=" overflow: hidden; background-color: #fff;border-radius: 20rpx;padding: 30rpx;">
				<view class="other-title">
					新能源商用车转让
				</view>
				<view @click="publish" class="_flex _justify_between align-items_center other-li"
					style="border-bottom: 1px solid #eee;">
					<view class="_flex align-items_center">
						<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/static/huoCar.png" mode="widthFix"
							style="width: 60px;padding-right: 20rpx;border-right: 1px solid #eee;"></image>
						<view class="" style="line-height: 60rpx;margin-left: 20rpx;">
							<view class="" style="font-size: 38rpx;">
								货车转让
							</view>
							<view class="" style="color: #888;">
								面包车|物流车|轻卡
							</view>
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view @click="publish" class="_flex _justify_between align-items_center other-li">
					<view class="_flex align-items_center">
						<image src="https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/static/bus.png" mode="widthFix"
							style="width: 60px;padding-right: 20rpx;border-right: 1px solid #eee;"></image>
						<view class="" style="line-height: 60rpx;margin-left: 20rpx;">
							<view class="" style="font-size: 38rpx;">
								客车转让
							</view>
							<view class="" style="color: #888;">
								金龙|安凯|宇通|中通
							</view>
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="introduce" @click="introduce">
					<text class="mfjs">卖法介绍</text>
		<!-- 			<u-icon style="margin-left: 10rpx;" color="#888" name="arrow-down"></u-icon> -->
				</view>
				<view 
					style=" overflow: hidden; background-color: #fff;padding: 0 30rpx;">
					<view >
						<image src="../../static/151634203774_.pic.jpg" mode="widthFix"
							style="width: 100%;"></image>
					</view>
				</view>

		
		
		
		<level-linkage v-if="treeData.length>0" ref="levelLinkage" :pickerValueDefault="pickerValueDefault" :allData="treeData"
		 @onConfirm="onConfirm" themeColor='#007AFF'></level-linkage>
		
	</view>
</template>

<script>
	import levelLinkage from "../../components/three-level-linkage/linkage.nvue"
	import API from "@/api/addCar.js"
	import app from "../../App.vue"
	export default {
		components: {
			levelLinkage
		},
		onShow() {
			this.getCity();
		},
		data() {
			return {
				pickerValueDefault: [0, 0],
				city:'11',
				treeData:[],
				assessInfo: {
					addresss: '选择城市',
					phone: null,
					cityId:null,
				},
				// defaultTime: '',
				// showDate: false,
				// params: {
				// 	year: true,
				// 	month: true,
				// },
				// cityparams: {
				// 	province: true,
				// 	city: true,
				// },
				introShow: false,
				// cityShow: false,
				codeShow: true,
				codeTips: 30,
				form: {
					checked: true
				},
			};
		},
	
		methods: {
			goPrivacyPolicy(){
			
				uni.navigateTo({
					url: "/pages/login/privacyPolicy"
				})
			},
			openLevel() {
			    this.$refs.levelLinkage.open();
			},
			getCity(){
				API.getCity().then(res=>{
					console.log(res);
					this.treeData = res.data
				})
			},
			onConfirm(e) {
				this.assessInfo.addresss = e.secondPick.name;
				this.assessInfo.cityId = e.secondPick.code;
	
			},
			// getYjSellCar(){
				
			// },
			// 货车转让,客车转让
			// publish() {
			// 	uni.navigateTo({
			// 		url: "./publish"
			// 	})
			// },
			onekey() {
				console.log(this.assessInfo)
				if(this.assessInfo.phone == null){
					uni.showToast({
						title: "请填写手机号码",
						icon: "none"
					})
					return false
				}
				//正则表达式
				let reg_phone = /^1[3456789]\d{9}$/; //
				let sign_phone = RegExp(reg_phone).test(this.assessInfo.phone);
				if (!sign_phone) {
					this.$u.toast('请输入正确的手机号码');
					return false
				}
				
				
				if(this.assessInfo.cityId == null){
					uni.showToast({
						title: "请选择所在城市",
						icon: "none"
					})
					return false
				}
				if (!this.form.checked) {
					uni.showToast({
						title: "请勾选用户协议",
						icon: "none"
					})
					return false
				}
				let data = {
					phone: this.assessInfo.phone,
					cityId: this.assessInfo.cityId
				}
				API.getYjSellCar(data).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title: "信息提交成功，请等待客服联系",
							icon: "none",
							success() {
								setTimeout(function() {
									uni.navigateBack({
										delta: 2
									})
								}, 1000);
							}
						})
					}else{
						uni.showToast({
							title: res.message || "信息提交失败！",
							icon: "none"
						})
					}
				})
			},
			// 卖法介绍
			introduce() {
				if(!this.introShow){
					this.introShow = true
				}else{
					this.introShow = false
				}
				
			},
			// 选择车型
			mySellCar() {
				uni.navigateTo({
					url: "./mySellCar"
				})
			},
			// 城市选择
			// cityChange(e) {
			// 	console.log(e)
			// 	if (e.province.label == "天津市" || e.province.label == "北京市" || e.province.label == "上海市" || e.province
			// 		.label == "重庆市" || e.province.label == "香港" || e.province.label == "澳门") {
			// 		this.assessInfo.addresss = e.province.label;
			// 		this.assessInfo.addresssId = e.province.value;
			// 	} else {
			// 		this.assessInfo.addresss = e.city.label;
			// 		this.assessInfo.addresssId = e.city.value;
			// 	}

			// },
			// 选择日期
			// clickDate() {
			// 	let date = new Date();
			// 	this.defaultTime = date.getFullYear() + '-' + (date.getMonth() + 1);
			// 	this.showDate = true;
			// },
			// // 日期确定
			// confirmDate(date) {
			// 	this.assessInfo.date = date.year + '-' + date.month
			// },
			// 获取验证码
			// getCode() {
			// 	// 模拟向后端请求验证码
			// 	uni.showLoading({
			// 		title: '正在获取验证码',
			// 		mask: true
			// 	})
			// 	this.codeShow = false
			// 	this.codeTips = setInterval(() => {
			// 		this.codeTips--
			// 		if (this.codeTips === 0) {
			// 			this.codeShow = true
			// 			clearInterval(this.codeTips)
			// 		}
			// 	}, 1000)
			// 	setTimeout(() => {
			// 		uni.hideLoading();
			// 		// 这里此提示会被this.start()方法中的提示覆盖
			// 		this.$u.toast('验证码已发送');
			// 		// 通知验证码组件内部开始倒计时
			// 		this.$refs.uCode.start();
			// 	}, 2000);
			// },
			// quickValuationStart() {
			// 	uni.showToast({
			// 		title: "提交成功，客服24小时内联系",
			// 		icon: "none"
			// 	})
			// }
		}
	};
</script>
<style scoped>
	.topBanner{
		width: 100%;
		height: 259rpx;
		position: relative;
		
	}
	.topbanner{
		width: 100%;
		height: 32rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0 0;
		position: absolute;
		bottom: 0;
	}
	.image{
		width: 100%;
		height: 100%;
	}
	.introduc {
		color: #888888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.sell_head {
		width: 100%;
		background-image: linear-gradient(#FFFDF0, #fff);
		padding: 30rpx;
		height: 200rpx;
	}

	.selected-Box {
		height: 100rpx;
		border: 1px solid #eee;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 10rpx;
		background: #F6F6F6;
	}

	.selected-Box .selectedR {
		padding-right: 20rpx;
		border-right: 1px solid #eee;
	}

	.selected-Box .selectedL {
		padding-left: 20rpx;
	}

	.read .tip {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}

	.btnBlue {
		background: #002B58;
		color: #fff;
		text-align: center;
		padding: 10rpx 20rpx;
		line-height: 45rpx;
		border-radius: 60rpx;
		
	}

	.btnBlueBorder {
		border: 1px solid #002B58;
		color: #002B58;
		text-align: center;
		padding: 10rpx 20rpx;
		line-height: 45rpx;
		border-radius: 20rpx;
	}

	.btnBlue_title {
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.btnBlue_desc {
	font-family: PingFangSC-Regular;
	font-size: 26rpx;
	color: #002B56;
	text-align: center;
	}

	.introduce {
		text-align: left;
		padding: 30rpx;
		color: #888;
		background: #fff;
		margin-top: 7rpx;
	}

	.other-title {
		font-size: 40rpx;
		height: 120rpx;
		font-weight: bold;
	}

	.other-li {
		padding: 30rpx;
	}
	.mfjs{
		font-family: PingFangSC-Medium;
		font-size: 36rpx;
		color: #2C2C2C;
		text-align: center;
	}
</style>
